<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看余额明细" v-model="visible" append-to-body width="'1200px'" @close="handleClose">
    <div class="my-2"><strong>当前余额: </strong>{{ form.total_funds }}{{ form.total_funds_currency }}</div>
    <vxe-table :data="form.data" class="w-full">
      <vxe-column title="结算周期" field="bank_name" minWidth="100"></vxe-column>
      <vxe-column title="期初余额" field="card_number" minWidth="200"></vxe-column>
    </vxe-table>
  </el-dialog>
</template>

<script setup>
import api from './api'

const load = ref(false)
const visible = ref(false)
const form = ref({})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  form.value = []
  if (!load.value) {
    load.value = true
    await 1
  }
  try {
    const res = await api.performance({shop_id})
    form.value = res.data
    visible.value = true
  } catch (error) {
    console.log('error', error)
  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>